// 二级菜单

const listBox = document.querySelector('.nav > .list')
const contentBox = document.querySelector('.nav > .content')
// 渲染页面
bindHtml()
function bindHtml() {
  // 利用 list 数组渲染页面
  let str = ''
  serverYF.data.forEach(item => {
    str += `
      <li data-id="${ item.createdTime }">
    `

    str += `
        <span>${ item.navigationName }</span>
    `

    str += `
      </li>
    `
  })
  listBox.innerHTML = str
}

// 绑定事件
const lis = listBox.querySelectorAll('li')
lis.forEach(function (item) {
  item.onmouseover = function () {
    // 从数组中找到对应的数据
    // 拿到自己身上自定义属性 id
    const id = parseInt(item.dataset.id)
    console.log(id)
    // 从数组中找到 id 对应的数据
    const Data = serverYF.data.find(item => item.createdTime === id)
    console.log(Data)
    bindRightHtml(Data)

    // 使用 data 把右边的数据渲染完毕即可
    contentBox.classList.add('active')
  }
})

listBox.onmouseleave = function () {
  contentBox.classList.remove('active')
}

// 渲染右边的函数
function bindRightHtml(Data) {

  let str = `
    <div class="left">
  `

  str += `
      <ul class="cate_list">
  `
 
  Data.list.forEach(item => {
    str += `
      <li>
        <div class="name">
          <span>${ item.navigationName }</span>

        </div>
        <ol>
    `

    item.list.forEach(t => {
      str += `
        <li>${ t.navigationName }</li>
      `
    })

    str += `
        </ol>
      </li>
    `
  })

  str += `
      </ul>
    </div>
  `

  contentBox.innerHTML = str
}





// swiper


var mySwiper = new Swiper ('.swiper', {
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',

    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },

    autoplay: {
        delay: 1000,//1秒切换一次
        disableOnInteraction: false
      },

  }) 



// 请求
// 1. 拿到 lcoalStorage 内的信息
// id: 为了知道当前登录的是哪一个用户
const id = window.localStorage.getItem('id')
// token: 因为请求当前用户信息的时候, 服务器要求你需要携带这个凭证
//        才能根据凭证证明你登录过, 并且是在有效期内登录过
//        才能给你当前用户的信息
const token = window.localStorage.getItem('token')

// 1. 获取页面元素
const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')

// 2. 判断
// 没有 id 说明, 你没有登录过
// 那么直接显示 您好 请登录
if (!id) {
  onBox.classList.remove('active')
  offBox.classList.add('active')
}

// 3. 在首页发送请求, 请求当前登录用户的个人信息
// 目的:
//   1. 为了拿到当前用户的 用户昵称
//   2. 为了验证一下当前的登录状态是不是过期了
//      因为只要登录状态过期了, 是拿不到数据的
//      只有登录状态没有过期, 才能拿到数据
const xhr = new XMLHttpRequest()

xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)

xhr.onload = function () {
  const res = JSON.parse(xhr.responseText)
  // 如果你的 token 是正常的, 那么得到一个当前用户的信息(包含 昵称 等信息)
  // 如果你的 token 是过期的, 那么得不到一个信息, 得到的是过期的信息

  // 判断, 如果是 401 说明, 登录过期了, 需要从新登录, 也得显示 您好请登录
  if (res.code === 401) {
    onBox.classList.remove('active')
    offBox.classList.add('active')
  }

  // 拿到正常的用户信息了, 那么直接显示 您好 xxxx 个人中心 注销登录
  if (res.code === 1) {
    onBox.firstElementChild.innerText = res.info.nickname
    offBox.classList.remove('active')
    onBox.classList.add('active')
  }
}

// 在请求头内书写一个 authorization 信息
// 因为服务器要求, 在请求头内加一个 authorization 信息, 表示你登录过的凭证
xhr.setRequestHeader('authorization', token)

xhr.send()

// 注销登录的点击事件
const logoutBtn = document.querySelector('.logout')
logoutBtn.addEventListener('click', async () => {
  // 不光要删除 lcoalStroage 内的信息
  // 还要发送请求, 告诉服务器, 该账号退出, 让本次的 token 时效
  const res = await pAjax({
    url: 'http://localhost:8888/users/logout',
    data: { id },
    dataType: 'json'
  })

  // 根据 res.code 来操作刷新一下页面
  // 顺便把 lcoalStorage 内的信息也删除
  if (res.code === 1) {
    window.localStorage.removeItem('id')
    window.localStorage.removeItem('token')

    // 刷新页面
    window.location.reload()
  }
})


// 搜索
// 1. 获取元素
const inp = document.querySelector('.search > input');
const ulBox = document.querySelector('.search > ul');

// 2. 绑定事件
inp.oninput = function () {
  const text = inp.value.trim();

  // 2-1. 填写 请求信息
  // 接受方地址1：https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=%E5%A4%A9%E7%8C%AB&req=2&bs=%E5%A4%A9%E7%8C%AB&csor=2&cb=jQuery1102031962630873438314_1639206334016&_=1639206334017 
  const script  = document.createElement('script');
  script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=${ text }&csor=2&cb=handler&_=1639206334017 `

  document.body.appendChild(script);
  script.remove();
}

// 2-2. 获取 响应数据
function handler(res){
  // console.log(res);
  
  if(!res.g){
    ulBox.style.display = 'none';
    return
  }

  let str = '';
  res.g.forEach(item => {
    str += `
      <li> ${ item.q } </li>
    `
  })
  ulBox.innerHTML = str;
  ulBox.style.display = 'block';
}

  
